import React, { useState } from 'react';
import { FilterSidebar } from '../components/UI/FilterSidebar';
import { Pagination } from '../components/UI/Pagination';
import { CheckIcon, DownloadIcon, BookmarkIcon, ChevronRightIcon } from 'lucide-react';
export const ChecklistsPage = () => {
  // Filter state
  const [selectedFilters, setSelectedFilters] = useState<Record<string, string[]>>({
    stage: [],
    category: [],
    format: []
  });
  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  // Filter groups
  const filters = [{
    id: 'stage',
    name: 'Life Stage',
    options: [{
      id: 'pregnancy',
      label: 'Pregnancy'
    }, {
      id: 'newborn',
      label: 'Newborn (0-3M)'
    }, {
      id: 'baby',
      label: 'Baby (4-12M)'
    }, {
      id: 'toddler',
      label: 'Toddler (1-3Y)'
    }]
  }, {
    id: 'category',
    name: 'Category',
    options: [{
      id: 'essentials',
      label: 'Essential Items'
    }, {
      id: 'safety',
      label: 'Safety'
    }, {
      id: 'health',
      label: 'Health & Wellness'
    }, {
      id: 'travel',
      label: 'Travel'
    }, {
      id: 'development',
      label: 'Development'
    }]
  }, {
    id: 'format',
    name: 'Format',
    options: [{
      id: 'printable',
      label: 'Printable PDF'
    }, {
      id: 'interactive',
      label: 'Interactive'
    }, {
      id: 'app',
      label: 'App Compatible'
    }]
  }];
  // Handle filter changes
  const handleFilterChange = (groupId: string, optionId: string, isSelected: boolean) => {
    setSelectedFilters(prevFilters => {
      const updatedGroup = [...(prevFilters[groupId] || [])];
      if (isSelected) {
        updatedGroup.push(optionId);
      } else {
        const index = updatedGroup.indexOf(optionId);
        if (index > -1) {
          updatedGroup.splice(index, 1);
        }
      }
      return {
        ...prevFilters,
        [groupId]: updatedGroup
      };
    });
    // Reset to first page when filters change
    setCurrentPage(1);
  };
  // Clear all filters
  const clearFilters = () => {
    setSelectedFilters({
      stage: [],
      category: [],
      format: []
    });
    setCurrentPage(1);
  };
  // Sample checklists data
  const checklists = [{
    id: 'cl1',
    title: 'Hospital Bag Essentials',
    description: 'Everything you need to pack for your hospital stay during labor and delivery.',
    stage: 'pregnancy',
    category: 'essentials',
    format: 'printable',
    image: 'https://images.unsplash.com/photo-1522771930-78848d9293e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 35,
    downloadCount: 15243
  }, {
    id: 'cl2',
    title: 'Newborn Essentials',
    description: "Must-have items for your baby's first three months.",
    stage: 'newborn',
    category: 'essentials',
    format: 'printable',
    image: 'https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 42,
    downloadCount: 23567
  }, {
    id: 'cl3',
    title: 'Baby-Proofing Checklist',
    description: 'Comprehensive guide to making your home safe for your curious baby.',
    stage: 'baby',
    category: 'safety',
    format: 'interactive',
    image: 'https://images.unsplash.com/photo-1566004100631-35d015d6a491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 28,
    downloadCount: 18932
  }, {
    id: 'cl4',
    title: 'Toddler Travel Essentials',
    description: "Don't forget these items when traveling with your toddler.",
    stage: 'toddler',
    category: 'travel',
    format: 'app',
    image: 'https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 24,
    downloadCount: 12785
  }, {
    id: 'cl5',
    title: 'Baby First Aid Kit',
    description: 'Essential medical supplies to have on hand for your baby.',
    stage: 'newborn',
    category: 'health',
    format: 'printable',
    image: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 18,
    downloadCount: 20156
  }, {
    id: 'cl6',
    title: 'Developmental Milestones Tracker',
    description: "Track your baby's growth and development from 0-12 months.",
    stage: 'baby',
    category: 'development',
    format: 'interactive',
    image: 'https://images.unsplash.com/photo-1596240898484-250d47f8e9d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 30,
    downloadCount: 17852
  }, {
    id: 'cl7',
    title: 'Breastfeeding Essentials',
    description: 'Must-have items for a successful breastfeeding journey.',
    stage: 'newborn',
    category: 'essentials',
    format: 'printable',
    image: 'https://images.unsplash.com/photo-1584814369280-712ede580bee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 22,
    downloadCount: 14325
  }, {
    id: 'cl8',
    title: 'Toddler Feeding Guide',
    description: 'Healthy eating tips and meal planning for toddlers.',
    stage: 'toddler',
    category: 'health',
    format: 'interactive',
    image: 'https://images.unsplash.com/photo-1596443686812-2f45229eebc3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 26,
    downloadCount: 11468
  }, {
    id: 'cl9',
    title: 'Nursery Setup Checklist',
    description: 'Everything you need for a safe and comfortable nursery.',
    stage: 'pregnancy',
    category: 'essentials',
    format: 'printable',
    image: 'https://images.unsplash.com/photo-1586015555751-63bb77f4322a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 32,
    downloadCount: 19876
  }, {
    id: 'cl10',
    title: 'Baby Sleep Guide',
    description: 'Tips and routines for better baby sleep.',
    stage: 'baby',
    category: 'development',
    format: 'app',
    image: 'https://images.unsplash.com/photo-1590004987763-0a9a4cb5e5c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 20,
    downloadCount: 16732
  }, {
    id: 'cl11',
    title: 'Postpartum Recovery Kit',
    description: "Essential items for mom's recovery after birth.",
    stage: 'pregnancy',
    category: 'health',
    format: 'printable',
    image: 'https://images.unsplash.com/photo-1584559582128-b8be30e2861f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 25,
    downloadCount: 21543
  }, {
    id: 'cl12',
    title: 'Toddler Safety Checklist',
    description: 'Keep your active toddler safe at home and outdoors.',
    stage: 'toddler',
    category: 'safety',
    format: 'interactive',
    image: 'https://images.unsplash.com/photo-1578986128278-4a2f000b5615?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    itemCount: 30,
    downloadCount: 15632
  }];
  // Filter checklists based on selected filters
  const filteredChecklists = checklists.filter(checklist => {
    // If no filters are selected for a category, include all items
    const stageMatch = selectedFilters.stage.length === 0 || selectedFilters.stage.includes(checklist.stage);
    const categoryMatch = selectedFilters.category.length === 0 || selectedFilters.category.includes(checklist.category);
    const formatMatch = selectedFilters.format.length === 0 || selectedFilters.format.includes(checklist.format);
    return stageMatch && categoryMatch && formatMatch;
  });
  // Pagination logic
  const itemsPerPage = 6;
  const totalPages = Math.ceil(filteredChecklists.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const displayedChecklists = filteredChecklists.slice(startIndex, startIndex + itemsPerPage);
  return <div className="w-full">
      {/* Hero Section */}
      <div className="bg-cream py-12 md:py-16">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl">
            <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
              Parenting Checklists
            </h1>
            <p className="font-inter text-gray-600 text-lg mb-6">
              Stay organized with our comprehensive checklists for every stage
              of your parenting journey.
            </p>
            <div className="flex flex-wrap gap-3">
              <a href="#pregnancy" className="bg-terracotta text-white px-4 py-2 rounded-md hover:bg-terracotta/90 transition-colors text-sm font-medium">
                Pregnancy
              </a>
              <a href="#newborn" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Newborn
              </a>
              <a href="#baby" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Baby
              </a>
              <a href="#toddler" className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium border border-gray-200">
                Toddler
              </a>
            </div>
          </div>
        </div>
      </div>
      {/* Main Content */}
      <div className="container mx-auto px-4 md:px-6 py-12">
        <div className="flex flex-col md:flex-row gap-8">
          {/* Sidebar Filters */}
          <FilterSidebar filters={filters} selectedFilters={selectedFilters} onFilterChange={handleFilterChange} onClearFilters={clearFilters} />
          {/* Checklists Grid */}
          <div className="flex-1">
            <div className="flex justify-between items-center mb-8">
              <h2 className="font-nunito font-semibold text-2xl text-dark">
                {filteredChecklists.length}{' '}
                {filteredChecklists.length === 1 ? 'Checklist' : 'Checklists'}
              </h2>
              <div className="flex items-center">
                <span className="text-sm text-gray-500 mr-3">Sort by:</span>
                <select className="border border-gray-300 rounded-md text-sm p-1.5">
                  <option>Most Popular</option>
                  <option>Newest</option>
                  <option>Alphabetical</option>
                </select>
              </div>
            </div>
            {filteredChecklists.length > 0 ? <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {displayedChecklists.map(checklist => <a key={checklist.id} href={`/checklists/${checklist.id}`} className="group bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                    <div className="aspect-[4/3] w-full">
                      <img src={checklist.image} alt={checklist.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                    </div>
                    <div className="p-5">
                      <div className="flex justify-between items-start mb-3">
                        <h3 className="font-nunito font-semibold text-lg">
                          {checklist.title}
                        </h3>
                        <button className="text-gray-400 hover:text-terracotta">
                          <BookmarkIcon size={18} />
                        </button>
                      </div>
                      <p className="text-sm text-gray-600 mb-4">
                        {checklist.description}
                      </p>
                      <div className="flex items-center justify-between text-sm">
                        <div className="flex items-center text-gray-500">
                          <CheckIcon size={14} className="mr-1" />
                          <span>{checklist.itemCount} items</span>
                        </div>
                        <div className="flex items-center text-gray-500">
                          <DownloadIcon size={14} className="mr-1" />
                          <span>
                            {(checklist.downloadCount / 1000).toFixed(1)}k
                          </span>
                        </div>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <div>
                          <span className={`inline-block px-2 py-1 text-xs rounded-full ${checklist.format === 'printable' ? 'bg-green-100 text-green-800' : checklist.format === 'interactive' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}`}>
                            {checklist.format === 'printable' ? 'PDF' : checklist.format === 'interactive' ? 'Interactive' : 'App'}
                          </span>
                        </div>
                        <div className="text-terracotta font-medium text-sm flex items-center">
                          View
                          <ChevronRightIcon size={16} className="ml-1" />
                        </div>
                      </div>
                    </div>
                  </a>)}
              </div> : <div className="bg-white rounded-lg p-8 text-center border border-gray-200">
                <h3 className="font-medium text-lg mb-2">
                  No checklists found
                </h3>
                <p className="text-gray-600 mb-4">
                  Try adjusting your filters to find what you're looking for.
                </p>
                <button onClick={clearFilters} className="text-terracotta hover:text-terracotta/80 font-medium">
                  Clear all filters
                </button>
              </div>}
            {/* Pagination */}
            {filteredChecklists.length > 0 && <div className="mt-8">
                <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
              </div>}
          </div>
        </div>
      </div>
      {/* Featured Section */}
      <div className="bg-cream py-12">
        <div className="container mx-auto px-4 md:px-6">
          <h2 className="font-nunito font-semibold text-2xl md:text-3xl text-dark mb-8">
            Featured Resources
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Custom Checklist Builder
              </h3>
              <p className="text-gray-600 mb-4">
                Create your own personalized checklists based on your specific
                needs and preferences.
              </p>
              <a href="/checklists/builder" className="text-terracotta hover:text-terracotta/80 font-medium flex items-center">
                Create custom checklist
                <ChevronRightIcon size={16} className="ml-1" />
              </a>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Checklist Collections
              </h3>
              <p className="text-gray-600 mb-4">
                Curated bundles of our most popular checklists for different
                parenting stages.
              </p>
              <a href="/checklists/collections" className="text-terracotta hover:text-terracotta/80 font-medium flex items-center">
                Browse collections
                <ChevronRightIcon size={16} className="ml-1" />
              </a>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
              <h3 className="font-nunito font-semibold text-xl mb-3">
                Checklist App
              </h3>
              <p className="text-gray-600 mb-4">
                Download our mobile app to access all your checklists on the go.
              </p>
              <a href="/app" className="text-terracotta hover:text-terracotta/80 font-medium flex items-center">
                Get the app
                <ChevronRightIcon size={16} className="ml-1" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>;
};